<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>

</head>

<body>


    <div id="app">

        <cpn v-bind:cnumber1='number1' v-bind:cnumber2='number2' @one='fatherone' @two='fathertwo'></cpn>

    </div>


</body>

<template id="cnps">
  <div>
    父组件:{{cnumber1}}    <br>
    子组件:{{data_cnumber1}}    <br>
    <input type="text" :value="data_cnumber1" @input='one'>
    <br>
    父组件:{{cnumber2}}    <br>
    子组件:{{data_cnumber2}}    <br>
    <input type="text" :value="data_cnumber2" @input='two'>
  </div>
</template>

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            number1: 1,
            number2: 0
        },
        methods: {
            fatherone(data) {
                this.number1 = parseInt(data);
            },
            fathertwo(data) {
                this.number2 = parseInt(data);
            }
        },
        components: {
            cpn: {
                template: '#cnps',
                props: {
                    cnumber1: Number,
                    cnumber2: Number
                },
                data() {
                    return {
                        data_cnumber1: this.cnumber1,
                        data_cnumber2: this.cnumber2,
                    }
                },
                methods: {
                    one(event) {
                        this.data_cnumber1 = event.target.value;
                        this.$emit('one', this.data_cnumber1);

                        this.data_cnumber2 = this.data_cnumber1 * 100;
                        this.$emit('two', this.data_cnumber2);

                    },
                    two(event) {
                        this.data_cnumber2 = event.target.value;
                        this.$emit('two', this.data_cnumber2);

                        this.data_cnumber1 = this.data_cnumber2 / 100;
                        this.$emit('two', this.data_cnumber1);

                    },
                },

            }
        }
    })
</script>